import React, { Component } from 'react';
import style from './index.module.scss';
import { NavLink } from 'react-router-dom'
import Footer from './../../components/footer'

class Com extends Component {
  state = {
    rento: 1,
    display: 'none',
    se: 1
  }
  she (num){
    this.setState({
      rento: num
    })
  }

  toto (to){
    this.setState({
      display: to
    })
  }

  gouxuan(to) {
    this.setState({
      se: to,
      display: 'none'
    })
  }
  render() {
    return (
      <div className='box'>
        <div className="content" style={{backgroundColor: '#EBEBEB'}}>
          {/* 头部图片 */}
          <div className={style.header}>
             {/* 返回按钮 */}
             <div className={style.heboxto} onClick={()=> {console.log(this.props.history.go(-1))}}>
                <span>&lt;</span>
                <span>返回</span>
              </div>
             {/* 节日下拉 */}
             <div className={style.jieri}>
                <span className={style.jiename}>厦门</span>
                <span style={{marginLeft: '6px'}}>&or;</span>
              </div>
              {/* 搜索框 */}
              <NavLink to="/search">
                <input type="text" className={style.sou} placeholder="搜索目的地" disabled/>
              </NavLink>
          </div>
          {/* 周边人气 */}
          <div className={style.renqibox}>
            <div className={style.renzi}>
              <span>周边人气景点</span>
              <div className={style.renright}>
                <div className={ this.state.rento === 1 ? style.yes : style.no} onClick={() => this.she(1)}></div>
                <div className={ this.state.rento === 2 ? style.yes : style.no} onClick={() => this.she(2)}></div>
                <div className={ this.state.rento === 3 ? style.yes : style.no} onClick={() => this.she(3)}></div>
              </div>
            </div>
            <ul>
              <li>
                <img src="/images/zhoubian/img2@2x.png"  alt=""/>
                <span><img src="/images/zhoubian/No.1@2x.png"  alt=""/></span>
              </li>
              <li>
                <img src="/images/zhoubian/img2@2x.png"  alt=""/>
              </li>
              <li>
                <img src="/images/zhoubian/img2@2x.png"  alt=""/>
              </li>
            </ul>
          </div>
          {/* 周边所有景点 */}
          <div className={style.every}>
            <div className={style.everyzi}>
              <span className={style.zileft}>周边所有景点</span>
              {/* 筛选 */}
                <div className={style.shai} onClick={() => this.toto('block')}>
                  <span>筛选</span>
                  <div className={style.tu}></div>   
                </div>
                <div className={style.dui} style={{ borderRadius:'10px', height: '1.775rem', position:'absolute', borderColor: '#fff', top: '0.08rem', display : this.state.display, width: '1.795rem', right: '-0.15rem', backgroundColor: '#666' }}>
                  <div className={style.wu} style={{width: '100%', height: '0.325rem', backgroundColor: '#fff'}}>
                    <div className={style.shai1}>
                      <span>筛选</span>
                      <div className={style.tu1}></div>   
                    </div>
                  </div>
                  {/* 下拉筛选 */}
                  <ul className={style.shailie} style={{backgroundColor: '#fff', 
                        height: '1.4rem', marginTop: '0.05rem', paddingLeft: '0.165rem', paddingRight: '0.14rem', boxSizing: 'border-box', borderBottomLeftRadius: '10px', borderBottomRightRadius: '10px'}}>
                      <li style={{ height: '0.35rem', 
                      border: '1px solid #e2e2e2', borderColor: '#e2e2e2', 
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center'}} onClick={() => this.gouxuan(1)}>
                        <span style={{color: this.state.se === 1 ?'#a9e9be' : '#333333', fontSize: '0.12rem'}}>距离</span>
                       { this.state.se === 1 ? <i style={{ width: '0.11rem', height: '0.11rem'}}></i> : '' } 
                      </li>
                      <li style={{height: '0.35rem', 
                      border: '1px solid #e2e2e2', borderColor: '#e2e2e2', 
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center'}} onClick={() => this.gouxuan(2)}>
                        <span style={{color: this.state.se === 2 ?'#a9e9be' : '#333333', fontSize: '0.12rem'}}>人气</span>
                       { this.state.se === 2 ? <i style={{ width: '0.11rem', height: '0.11rem'}}></i> : '' } 
                      </li>
                      <li style={{height: '0.35rem', 
                      border: '1px solid #e2e2e2', borderColor: '#e2e2e2', 
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center'}} onClick={() => this.gouxuan(3)}>
                        <span style={{color: this.state.se === 3 ?'#a9e9be' : '#333333', fontSize: '0.12rem'}}>口碑</span>
                       { this.state.se === 3 ? <i style={{ width: '0.11rem', height: '0.11rem'}}></i> : '' } 
                      </li>
                      <li style={{height: '0.35rem', 
                      border: '1px solid #e2e2e2', borderColor: '#e2e2e2', 
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center'}} onClick={() => this.gouxuan(4)}>
                        <span style={{color: this.state.se === 4 ?'#a9e9be' : '#333333', fontSize: '0.12rem'}}>综合</span>
                       { this.state.se === 4 ? <i style={{ width: '0.11rem', height: '0.11rem'}}></i> : '' } 
                      </li>
                    </ul>
                </div>
            </div>
            
              <ul className={style.uul}>
                <li>
                  <img src="/images/zhoubian/xiamendaxue@2x.png" alt=""/>
                  <span className={style.hot}></span>
                  <div className={style.jiesao}>
                    <div className={style.title}>厦门大学</div>
                    <div className={style.zi}>厦大是综合研究型全国重点大学，早期建筑入选全国重点文物保护单位，被誉为“南方之强”。</div>
                    <div className={style.jiedi}>
                      <div className={style.ding}><span>距你约 5.4 km</span></div>
                      <div className={style.fenzan} style={{height: '0.1rem', width:'50%'}}>
                        <div className={style.zan} style={{}} >
                          <span>12345 人</span>
                        </div>
                        <div className={style.fento} style={{}}>
                          <span>4573 人</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            
          </div>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
